<template>
  <div class="">
    <tableComponents
      :pagination="{currentPage,pageSize,total:list.all_num}"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      :isHaveExport="false"
      :isHaveAdd="false"
      :isShow='false'
    >
      <template v-slot:table>
        <el-row>
          <el-col :span="24">
            <div id="content-right-box" class="content-right-box" style="background:none">
              <div class="content-right">
                <h1 class="content-right-title">
                  短信充值
                  <a
                    class="gicon-info-sign gicon_linkother"
                    href="/Help/lists/id/216.html"
                    target="_blank"
                  ></a>
                </h1>
                <div class="alert alert-info" style="line-height: 25px; height:40px;width:100%">
                  当前可用短信数量：
                  <span class="colorRed ftsize18">{{sms_num}}</span> 条
                </div>
                <el-row class="mar_bottom_5">
                  <el-table
                    v-loading="loading"
                    ref="multipleTable"
                    stripe
                    class="mar_bottom_5"
                    header-row-class-name="head_color"
                    :data="list"
                    tooltip-effect="dark"
                    style="width: 99.9%"
                  >
                    <el-table-column label="充值项目" min-width="200">
                      <template slot-scope="scope">{{scope.row.name}}</template>
                    </el-table-column>

                    <el-table-column label="套餐类型" min-width="550">
                      <template slot-scope="scope">
                        {{scope.row.code}}
                        <el-col :span="8">
                          <el-select
                            v-model="sel_id"
                            clearable
                            placeholder="请选择"
                            @change="sms_change"
                          >
                            <el-option
                              v-for="item in options"
                              size="mini"
                              :key="item.id"
                              :label="item.title + '/' + item.number + '条' "
                              :value="item.id"
                            ></el-option>
                          </el-select>
                        </el-col>
                      </template>
                    </el-table-column>

                    <el-table-column label="金额" min-width="150">
                      <template slot-scope="scope">
                        {{scope.row.code}}
                        <span
                          v-if="sel_form.money"
                          style="font-size:18px;color:#FF0000"
                        >{{sel_form.money}} 元</span>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-col :span="24" class="tr">
                    <el-button
                      :loading="$store.state.isLoading"
                      type="warning"
                      size="small"
                      @click="submit_recharge"
                    >立即充值</el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </template>
    </tableComponents>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sms_num: 0,
      list: [{ name: "短信增值包	", code: "" }],
      loading: false,
      options: [],
      sel_id: "",
      sel_form: {}
    };
  },
  methods: {
    sms_change(item) {
      let sel = this.sel_id;
      this.options.forEach(item => {
        if (item.id == this.sel_id) {
          this.sel_form = item;
          return;
        }
      });
    },
    get_smsnum() {
      this.$api.getConfig.get_smsnum({}).then(res => {
        if (res.data.code == 200) {
          this.sms_num = res.data.result;
        }
      });
    },
    get_smspackage() {
      this.$api.getConfig.get_smspackage({}).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.options = res.data.result;
        }
      });
    },
    submit_recharge() {
      if (this.sel_id == "") {
        this.$fnc.alertError("请选择套餐");
      } else {
        this.$swal({
          title: `您确定要开通${this.sel_form.title}吗`,
          text: `将支付余额${this.sel_form.money}开通${this.sel_form.title}`,
          type: "success",
          showCancelButton: true,
          confirmButtonColor: "#409EFF",
          confirmButtonText: "是的，我要开通",
          cancelButtonColor: "#DD6B55",
          cancelButtonText: "容我三思"
        }).then(willDelete => {
          if (willDelete.value) {
            this.$api.getConfig
              .get_smsrecharge({ id: this.sel_form.id })
              .then(res => {
                if (res.data.code == 200) {
                  this.$swal("充值成功！", "您已经成功充值短信。", "success");
                  this.get_smsnum();
                } else {
                  this.$swal("充值失败！", res.data.result, "error");
                  this.get_smsnum();
                }
              });
          }
        });
      }
    }
  },
  mounted() {
    this.get_smsnum();
    this.get_smspackage();
  }
};
</script>
